<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-惠众云管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        
    </head>
    <body>
    <div class="x-body layui-anim layui-anim-up">
    	<blockquote class="layui-elem-quote">欢迎管理员：<span class="x-red">test</span></blockquote>
        <div id="#myTab0" class="index_nav">
        	<ul>
        		<li><a _href="shezhi_dqgl.html">地区管理</a></li>
        		<li><a _href="shezhi_htgly.html">后台管理员管理</a></li>
        		<li><a _href="shezhi_qtgly.html">前台管理员管理</a></li>
        		<li><a _href="chuli_clzx.html">垃圾处理中心管理</a></li>
        		<li><a _href="yunshu_xlgl.html">垃圾清运线路管理</a></li>
        		<li><a _href="yunshu_clgl.html">清运车辆管理</a></li>
        	</ul>
        </div>
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 32.33%; float: left;">
	            <legend>设备预警</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>满筒预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">14</td>
	                        </tr>
	                        <tr>
	                            <th>超重预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">13</td>
	                        </tr>
	                        <tr>
	                            <th>温度过高预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">64</td>
	                        </tr>
	                        <tr>
	                            <th>水位过高预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">23</td>
	                        </tr>
	                        <tr><td style="height: 19px;"></td><td></td>
	                        </tr>
	                        <tr><td style="height: 19px;"></td><td></td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
	        <fieldset class="layui-elem-field" style="width: 32.33%; float: left; margin-left: 1%;">
	            <legend>故障预警</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>满筒预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">53</td>
	                        </tr>
	                        <tr>
	                            <th>超重预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">23</td>
	                        </tr>
	                        <tr>
	                            <th>温度过高预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">23</td>
	                        </tr>
	                        <tr>
	                            <th>水位过高预警数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">21</td>
	                        </tr>
	                        <tr><td style="height: 19px;"></td><td></td>
	                        </tr>
	                        <tr><td style="height: 19px;"></td><td></td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
	        <fieldset class="layui-elem-field" style="width: 32.33%; float: right;">
	            <legend>其他任务</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>等待上门取件数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">65</td>
	                        </tr>
	                        <tr>
	                            <th>实卡申请数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">75</td>
	                        </tr>
	                        <tr>
	                            <th>上报问题数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">85</td>
	                        </tr>
	                        <tr>
	                            <th>设备注册审核</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">55</td>
	                        </tr>
	                        <tr>
	                            <th>保洁任务数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">32</td>
	                        </tr>
	                        <tr>
	                            <th>文章审核</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">21</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
       	</div>
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 49%; float: left;">
	            <legend>设备数量</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>辖区内厨余其他垃圾收集设备数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">45</td>
	                        </tr>
	                        <tr>
	                            <th>可回收垃圾收集设备数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">35</td>
	                        </tr>
	                        <tr>
	                            <th>有害垃圾收集筒数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">21</td>
	                        </tr>
	                        <tr>
	                            <th>垃圾袋发放机数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">22</td>
	                        </tr>
	                        <tr>
	                            <th>礼品兑换机数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">14</td>
	                        </tr>
	                        <tr>
	                            <th>资源化处理设备数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">15</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
	        <fieldset class="layui-elem-field" style="width: 49%; float: left; margin-left: 1%;">
	            <legend>工作人员</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>辖区内普通用户</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">19</td>
	                        </tr>
	                        <tr>
	                            <th>设备管理员</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">21</td>
	                        </tr>
	                        <tr>
	                            <th>维修员</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">53</td>
	                        </tr>
	                        <tr>
	                            <th>保洁员</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">24</td>
	                        </tr>
	                        <tr>
	                            <th>清运员</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">25</td>
	                        </tr>
	                        <tr>
	                            <th>垃圾处理员人数</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">22</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
       	</div>
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 49%; float: left;">
	            <legend>清运车辆</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>辖区内厨余垃圾清运车</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">6</td>
	                        </tr>
	                        <tr>
	                            <th>其他垃圾清运车</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">85</td>
	                        </tr>
	                        <tr>
	                            <th>可回收垃圾清运车</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">25</td>
	                        </tr>
	                        <tr>
	                            <th>有害垃圾清运车数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">12</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
	        <fieldset class="layui-elem-field" style="width: 49%; float: left; margin-left: 1%;">
	            <legend>处理中心</legend>
	            <div class="layui-field-box">
	                <table class="layui-table">
	                    <tbody>
	                        <tr>
	                            <th>辖区内厨余垃圾处理中心</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">40</td>
	                        </tr>
	                        <tr>
	                            <th>其他垃圾处理中心</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">22</td>
	                        </tr>
	                        <tr>
	                            <th>可回收垃圾处理中心</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">158</td>
	                        </tr>
	                        <tr>
	                            <th>有害垃圾处理中心数量</th>
	                            <td style="width: 50px; text-align: center; color: #eb0e0e;">36</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	        </fieldset>
       	</div>
       	
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 49%; float: left;">
	            <legend></legend>
	            <div class="layui-field-box">

<script src="js/canvas.js"></script>
<div id="chartContainer"></div>
<script>
    new CanvasJS.Chart('chartContainer',{
        theme:'light7',//主题
        animationEnabled: true, 	
        title: {
            text: "垃圾投放统计"
        },
        data: [
            {
                // 数据
                type: "column",
                dataPoints: [
                    { label: "厨余", y: 10 },
                    { label: "其他", y: 15 },
                    { label: "有害", y: 25 },
                    { label: "可回收", y: 30 }
                ]
            }
        ]
    }).render();
</script>
	            </div>
	        </fieldset>
	        <fieldset class="layui-elem-field" style="width: 49%; float: left; margin-left: 1%;">
	            <div class="layui-field-box">
<div id="chartContainer2"></div>
<script>
    new CanvasJS.Chart('chartContainer2',{
        theme:'light7',//主题
        animationEnabled: true, 	
        title: {
            text: "清运工作"
        },
        data: [
            {
                // 数据
                type: "column",
                dataPoints: [
                    { label: "厨余", y: 10 },
                    { label: "其他", y: 15 },
                    { label: "有害", y: 25 },
                    { label: "可回收", y: 30 }
                ]
            }
        ]
    }).render();
</script>
	            </div>
	        </fieldset>
       	</div>
       	
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 49%; float: left;">
	            <div class="layui-field-box">
<div id="line" style="width:100%;height:300px;"></div>
	            </div>
	        </fieldset>
	        
	        <fieldset class="layui-elem-field" style="width: 49%; float: left; margin-left: 1%;">
	            <div class="layui-field-box">
<div id="line2" style="width:100%;height:300px;"></div>
	            </div>
	        </fieldset>
       	</div>
       	
       	<div style=" width: 100%; height: auto; overflow: hidden;">
	        <fieldset class="layui-elem-field" style="width: 49%; float: left;">
	            <div class="layui-field-box">
<div id="line3" style="width:100%;height:300px;"></div>
	            </div>
	        </fieldset>
	        
	        <fieldset class="layui-elem-field" style="width: 49%; float: left; margin-left: 1%;">
	            <div class="layui-field-box">
<div id="line4" style="width:100%;height:300px;"></div>
	            </div>
	        </fieldset>
       	</div>
       	
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript">
var line = echarts.init(document.getElementById('line'));
line.setOption({
    color:["#ce6e73","#ee804b"],
    title: {
        x: 'left',
        text: '厨余垃圾',
        textStyle: {
            fontSize: '18',
            color: '#4c4c4c',
            fontWeight: 'bolder'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'right',
        data:['进料','出料']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line']}
        }
    },
    xAxis:  {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisLabel: {
            interval:0
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'进料',
            type:'line',
            data:[95, 42, 18, 45, 48, 49,100]
        },
        {
            name:'出料',
            type:'line',
            data:[35, 32, 75, 85, 28, 69,30]
        }
    ]
}) ;

//折线图
var line = echarts.init(document.getElementById('line2'));
line.setOption({
    color:["#ce6e73","#ee804b"],
    title: {
        x: 'left',
        text: '其他垃圾',
        textStyle: {
            fontSize: '18',
            color: '#4c4c4c',
            fontWeight: 'bolder'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'right',
        data:['进料','出料']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line']}
        }
    },
    xAxis:  {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisLabel: {
            interval:0
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'进料',
            type:'line',
            data:[95, 42, 18, 45, 48, 49,100]
        },
        {
            name:'出料',
            type:'line',
            data:[35, 32, 75, 85, 28, 69,30]
        }
    ]
}) ;

//折线图
var line = echarts.init(document.getElementById('line3'));
line.setOption({
    color:["#ce6e73","#ee804b"],
    title: {
        x: 'left',
        text: '有害垃圾',
        textStyle: {
            fontSize: '18',
            color: '#4c4c4c',
            fontWeight: 'bolder'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'right',
        data:['进料','出料']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line']}
        }
    },
    xAxis:  {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisLabel: {
            interval:0
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'进料',
            type:'line',
            data:[95, 42, 18, 45, 48, 49,100]
        },
        {
            name:'出料',
            type:'line',
            data:[35, 32, 75, 85, 28, 69,30]
        }
    ]
}) ;

//折线图
var line = echarts.init(document.getElementById('line4'));
line.setOption({
    color:["#ce6e73","#ee804b"],
    title: {
        x: 'left',
        text: '可回收垃圾',
        textStyle: {
            fontSize: '18',
            color: '#4c4c4c',
            fontWeight: 'bolder'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'right',
        data:['进料','出料']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line']}
        }
    },
    xAxis:  {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisLabel: {
            interval:0
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'进料',
            type:'line',
            data:[95, 42, 18, 45, 48, 49,100]
        },
        {
            name:'出料',
            type:'line',
            data:[35, 32, 75, 85, 28, 69,30]
        }
    ]
}) ;

        </script>
        <fieldset class="layui-elem-field">
            <legend>积分统计</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                <div carousel-item="">
                                    <ul class="layui-row layui-col-space10 layui-this">
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>辖区内剩余积分总数</h3>
                                                <p>
                                                    <cite>66</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>日产生积分与消耗积分统计</h3>
                                                <p>
                                                    <cite>12</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>辖区内用户积分排行榜</h3>
                                                <p>
                                                    <cite>99</cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    </body>
</html>